<template>
	<view class="page">
		<canvas canvas-id="myCanvas" class="bgff "></canvas>
		<view class="fixed flex flexC fs12 aliC px20 p20">

			<view class="btn flex flexC flex1">
				<button class="bg41 flex1 fs14 py12 w-8 cff r40 " @click="onSaveImage" hover-class="none">保存图片</button>

			</view>

		</view>



	</view>
</template>
<script>
	const screenWidth = uni.getSystemInfoSync().screenWidth;
	export default {
		data() {
			return {
				screenWidth,
				shareLogo: "",
				drawQueue: [],
				ctx: null, //画布上下文
				imgSrc: '',
				mobile: '',
				avatar: '',
				username: '',
				shareLogo: '',
				refMobile: '',
				shop_logo: '',
				bg: 'https://card2022.oss-cn-shenzhen.aliyuncs.com/uploads/20220506/33b23cfb7abdd34fa72ec5e69238f954.png',
				shop_name: '',
				list: [

				],
				mobile: '',
				mobilestr:''
			};
		},
		computed: {
			myPx() {
				return this.screenWidth / 750
			},
		},
		onLoad(options) {

			this.ctx = uni.createCanvasContext('myCanvas', this)

			this.bg = decodeURIComponent(options.bg)
			
			console.info("===bg=="+this.bg);

			this.mobile = uni.getStorageSync("mobile");
			this.mobilestr = this.mobile.substring(0, 3) + "****" + this.mobile.substr(this.mobile.length - 4);

			this.getDetail();
		},


		methods: {

			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 2,
					imageUrl: this.imgSrc,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			share2() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.imgSrc,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},


			getDetail() {

				let str = this.mobile;
				var path = "pages/user/register";
				let that =this;
				console.info(path);
				let param = {
					scene: encodeURIComponent(str),
					page: path,
				}
				this.$api.getShareUrl(param).then(res => {

					if (res.code == 1) {

						that.shop_logo = res.data;
						that.initDraw();
					} else {

					}

				})
			},

			initDraw() {

				this.drawQueue = [{
						path: this.bg,
						x: 0,
						y: 0,
						width: 621,
						height: 1100,
						type: 'image',
					},

					{
						text: '小胡童',
						color: '#000',
						size: 40,
						x: 80,
						y: 980,
						type: 'text',
					},
					{
						text: this.mobilestr,
						color: '#000',
						size: 30,
						x: 70,
						y: 1050,
						type: 'text',
					},
					{
						text: '长按或扫码查看',
						color: '#797979',
						size: 24,
						x: 80,
						y: 1090,
						type: 'text',
					},

					{
						path: this.shop_logo,
						x: 400,
						y: 910,
						width: 190,
						height: 190,
						type: 'image',
					}

				]
				// //canvas 网络图片处理
				this.generateImg();
				this.onShowShare();
			},

			// 保存图片到相册
			onSaveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgSrc,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "图片已保存至相册"
						});
					},
					fail(res) {
						console.info(res)
					}
				});
			},
			onShowShare() {
				uni.showLoading({
					title: '正在生成图片'
				})
				setTimeout(() => {
					uni.hideLoading();
					if (!this.imgSrc) { //重复点击时不需要再次画图
						this.draw()
					}
				}, 1000);
			},
			generateImg() {
				/* 将图片路径取出放入绘图队列 */
				this.drawQueue && this.drawQueue.map(current => {
					/* 图片需获取本地缓存path放入队列 */
					if (current.type === 'image') {
						uni.downloadFile({
							url: current.path,
							success: (res) => {
								current.path = res.tempFilePath
							}
						})
					}
				})
			},
			draw() {
				/* 所有元素入队则开始绘制 */
				this.ctx.save()
				this.ctx.restore();
				this.drawQueue && this.drawQueue.forEach(current => {
					/* 文本绘制 */
					if (current.type === 'text') {
						this.ctx.setFillStyle(current.color)
						this.ctx.setFontSize(current.size * this.myPx)
						this.ctx.fillText(current.text, current.x * this.myPx, current.y * this.myPx)
						this.ctx.restore();
					}
					// /* 图片绘制 */
					if (current.type === 'image') {
						this.ctx.drawImage(current.path, current.x * this.myPx, current.y * this.myPx, current
							.width * this.myPx, current.height * this.myPx)
					}
				})
				return new Promise(resolve => {
					this.ctx.draw(false, () => {
						this.onDrawCanvas()
					});
				});
			},
			onDrawCanvas() {
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					fileType: "png",
					success: (res) => {
						this.imgSrc = res.tempFilePath
					},
					fail: () => {
						this.onDrawCanvas()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.bgffc {
		background-color: #FFCF49;
		color: #fff;
	}

	canvas {
		height: 1104upx;
		width: 621upx;
		margin: auto;
		margin-top: 10rpx;
	}

	.w46 {
		width: 92upx;
		height: 92upx;
	}

	.share {
		position: relative;

		.qrcode {
			position: absolute;
			bottom: 62upx;
			left: 70upx;
			width: 120upx;
		}
	}

	.fixed {
		position: fixed;
		bottom: 0;
		width: 100vw;
		box-sizing: border-box;
	}
</style>
